<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<view class="" style="height: 20rpx;">
			
		</view>
		<view class="functionItem" @click="chooseAvatar">
			<view class="left">
				头像
			</view>
			<image class="imageWrapper" :src="avatar" mode=""></image>
		</view>
		<view class="functionItem">
			<view class="left">
				姓名
			</view>
			<view class="right">
				{{sellerObj.name}}
			</view>
		</view>
		<view class="functionItem">
			<view class="left">
				手机号
			</view>
			<view class="right">
				{{sellerObj.phone}}
			</view>
		</view>

		<view class="functionItem" @click="chooseQrCode">
			<view class="left">
				微信二维码
			</view>
			<image v-if="wechatQrcode" :src="wechatQrcode" class="imageQrWrapper"  mode=""></image>
			<image v-else src="@/static/image/icon_camera.png" class="imageQrWrapper" mode=""></image>
		</view>
		<view class="functionItem" @click="gotoWechatCode">
			<view class="left">
				微信号
			</view>
			<view class="right">
				{{wechatCode}}
				<image class="image" src="@/static/image/icon_more.png" mode=""></image>
			</view>
		</view>
		<view class="functionItem" @click="gotoPersonSignature">
			<view class="left">
				个人简介
			</view>
			<view class="right " >
				<view style="max-width: 400rpx;" >
					{{personSignature}}
				</view>
				
				<image class="image" src="@/static/image/icon_more.png" mode=""></image>
			</view>
		</view>
		
		<view class="functionItem" style="margin-top: 30rpx;">
			<view class="left">
				所属项目
			</view>
			<view class="right">
				{{shopInfo.name}}
			</view>
		</view>
		
		
		<view class="functionItem">
			<view class="left">
				职位
			</view>
			<view class="right">
				{{sellerObj.roleName}}
			</view>
		</view>
		
		<view class="functionItem">
			<view class="left">
				项目地址
			</view>
			<view class="right">
				{{shopInfo.address}}
			</view>
		</view>
		
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")

	export default {
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
				buyerId: state => state.userInfo.buyerObj.id,
			}),
		},
		data() {
			return {
				avatar:"",
				wechatCode: "",
				personSignature: "",
				wechatQrcode: "",
				wechatCodeFocus: false,
				personSignatureFocus: false,
				isSinglePage: false,
			};
		},
		onLoad(options) {
			that = this;
			that.wechatCode = that.sellerObj.wechatCode || ''
			that.personSignature = that.sellerObj.personSignature || ''
			that.wechatQrcode =	that.sellerObj.wechatQrcode||''
			that.avatar = that.sellerObj.avatar||""
		},
		onShow(){
			that.wechatCode = that.sellerObj.wechatCode || ''
			that.personSignature = that.sellerObj.personSignature || ''
			that.wechatQrcode =	that.sellerObj.wechatQrcode||''
			that.avatar = that.sellerObj.avatar||""
		},
		components: {

		},

		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setShopInfo"]),

			gotoWechatCode(){
				uni.navigateTo({
					url: './editorWechatCode' 
				})
			},
			
			gotoPersonSignature(){
				uni.navigateTo({
					url: "./editorPersonSignature"
				})
			},
			
			onSave(){
				api.updateSalesmanCard({
					param: {
						wechatQrcode:  that.wechatQrcode,
						avatar: that.avatar,
						personSignature:  that.personSignature,
						wechatCode:  that.wechatCode,
					}
				}).then(res => {
					console.log("uploadAvatar:", res)
					if (res.success){
						uni.showToast({
							title:'保存成功!'
						})
						api.getUserInfo().then(res1 => {
							if (res1.success) {
								that.setUserInfo(res1.data)
							} else {
						
							}
						}).catch(err => {
						
						})
					}
				})
			},
			

		
			chooseAvatar() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res)
						if (res.tempFilePaths&&res.tempFilePaths.length==1){
							utils.uploadImage(res.tempFilePaths[0], that.buyerId, (path)=>{
								that.avatar = path;
								that.onSave()					
							})	
						}
					},
				})
			},
			
			chooseQrCode() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res)
						if (res.tempFilePaths&&res.tempFilePaths.length==1){
							utils.uploadImage(res.tempFilePaths[0], that.buyerId, (path)=>{
								that.wechatQrcode = path;
								that.onSave()
							})	
						}
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F3F3F3;
	}
</style>
<style lang="scss">

	.functionItem {
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1px;
		padding: 20rpx 30rpx;
		.left {
			font-size: 30rpx;
			color: #333333;
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				// margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #666;
			.image {
				width: 16rpx;
				height: 22rpx;
				margin-left: 20rpx;
			}
		}
		.imageWrapper{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background-color: #ddd;
		}
		.imageQrWrapper{
			width: 90rpx;
			height: 90rpx;
			border-radius: 4rpx;
			background-color: #ddd;
		}
	}


	.headerContainer {
		width: 750rpx;
		background-image: url(../static/image/bg_card.jpg);
		background-repeat: no-repeat;
		background-size: 750rpx 291rpx;

		.top {
			display: flex;
			margin-top: 34rpx;
			margin-left: 40rpx;
			align-items: center;
			.qrCodeWrapper{
				margin-left: 180rpx;
				width: 110rpx;
				height: 110rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				border-radius: 10rpx;
				color:#888;
				font-size: 20rpx;
				margin-top: 15rpx;
			}
			.avatarWrapper {
				width: 120rpx;
				height: 120rpx;
				position: relative;
				margin-right: 30rpx;
				.editIcon {
					width: 120rpx;
					position: absolute;
					left: 0;
					bottom: -10rpx;
					font-size: 20rpx;
					display: flex;
					color: #fff;
					padding:0 5rpx;
					border-radius: 5rpx;
					align-items: center;
					justify-content: space-between;
					background-color: rgba(0, 0, 0, 0.3);
				}

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;

					background-color: #fff;
				}

			}


			.wrapper {
				.name {
					font-size: 34rpx;
					font-weight: bold;
					color: #ffffff;
					margin-bottom: 23rpx;
				}

				.shopName {
					font-size: 26rpx;
					color: #fffefe;
					opacity: 0.7;
				}
			}
		}

		.bottom {
			width: 702rpx;
			// height: 244rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-left: 24rpx;
			margin-top: 36rpx;
			padding-top: 32rpx;
			padding-bottom: 32rpx;

			.wrapper {
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;
				margin-bottom: 34rpx;

				.icon {
					width: 26rpx;
					height: 26rpx;
					margin-left: 39rpx;
					margin-right: 18rpx;
				}
			}

			.wechat {
				display: flex;
				align-items: center;

				.icon {
					width: 26rpx;
					height: 26rpx;
					margin-left: 39rpx;
					margin-right: 18rpx;
				}

				.name {
					width: 310rpx;
					height: 58rpx;
					background-color: #f8f8f8;
					border-radius: 10rpx;
					padding: 0 10rpx;
					margin-right: 17rpx;
				}

				.edit {
					font-size: 28rpx;
					color: #16a5fe;
				}

				.confirm {
					width: 76rpx;
					height: 54rpx;
					background-color: #f3f8ff;
					border-radius: 10rpx;
					border: solid 1rpx #16a5fe;
					font-size: 24rpx;
					color: #16a5fe;
					text-align: center;
					line-height: 54rpx;
				}
			}
		}
	}

	.personSignatureHeader {
		display: flex;
		width: 700rpx;
		justify-content: space-between;
		align-items: center;
		margin-top: 38rpx;
		margin-bottom: 26rpx;

		.left {
			font-size: 32rpx;
			color: #121212;
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #16a5fe;

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}
		}
	}

	.personSignature {
		box-sizing: border-box;
		min-height: 246rpx;
		width: 702rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 45rpx 31rpx;
	}

	.personSignatureEdit {
		border: solid 1rpx #32b0ff;
	}



	.middleContainer {
		width: 702rpx;
		height: 182rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 24rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			color: #333333;
			line-height: 26rpx;

			.icon {
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 20rpx;
			}

		}
	}

	.introContainer {
		width: 702rpx;
		min-height: 246rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 25rpx;
		padding-top: 32rpx;
		padding-bottom: 32rpx;

		.header {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #121212;
			margin-bottom: 41rpx;

			.icon {
				width: 8rpx;
				height: 36rpx;
				background-color: #ff853b;
				border-radius: 4rpx;
				margin-right: 20rpx;
			}
		}

		.text {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #666666;
			word-wrap: break-word
		}
	}
</style>